<template>
  <div class="app-container">
    <div style="height: 100px"></div>
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <el-descriptions column="1" :colon="false" class="userInfo">
            <el-descriptions-item>
              <el-avatar :size="80" :src="this.user.avatar"></el-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="用户名：">{{ user.userName }}</el-descriptions-item>
            <el-descriptions-item label="手机号：">{{ user.phonenumber }}</el-descriptions-item>
            <el-descriptions-item label="用户邮箱：">{{ user.email }}</el-descriptions-item>
            <el-descriptions-item label="创建时间：">{{ user.createTime }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user"/>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd/>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import userInfo from "@/views/mine/components/userInfo";
import resetPwd from "@/views/mine/components/resetPwd";
import {getInfo} from "@/api/user";

export default {
  components: {
    userInfo, resetPwd
  },
  data() {
    return {
      user: {},
      circleUrl: 'http://182.254.140.26:9000/disk/profile_1710419317213.jpg',
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      activeTab: "userinfo"
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      getInfo().then(res => {
        console.log("user",res.user)
        this.user = res.user
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px 30px;

  .userInfo {
    display: flex;

  }

}
</style>
